import React from 'react';
import styled from 'styled-components';
import Icon from './Icon';
import {NavLink} from 'react-router-dom';
import {Button, message} from 'antd';
import {useStores} from '../libs/useStores';
import {observer} from 'mobx-react';
import {useHistory} from 'react-router-dom'

const StyledHeader = styled.header`
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    > svg {
        height: 64px;
        width: 64px;
            margin: 0 20px 0 15vw;

    }
`;

const StyledNav = styled.nav`
    flex-grow: 1;
    display: flex;
    
`;

const StyledLink = styled(NavLink)`
    padding: 0 20px;
    color: #393939;
    font-weight: bold;
    line-height: 32px;
    border-radius: 6px;
    &.active {
      color: #F57C01;
    }
    &:hover {
      color: white;
      background: #F57C01;
    }
`;

const StyledUserInfoContainer = styled.div`
    margin: 0 15vw 0 20px;
    display: flex;
    align-items: center;
`;

const StyledPrimaryButton = styled(Button)`
    margin: 0 0 0 20px;
    border-radius: 6px;
    text-align: center;
    background: #F57C01;
    border: #FEA043;
    &:hover,
    &:active,
    &:focus {
        background: #FEA043;
    }
`;

const StyledButton = styled(Button)`
    margin: 0 0 0 20px;
    border-radius: 6px;
    text-align: center;
    color: #F57C01;
    border-color: #FEA043;
    &:hover,
    &:active,
    &:focus{
        color: #F57C01;
        background: #F57C0116;
        border-color: #FEA043;
    }
`;

const Header: React.FC = observer(() => {

    const history = useHistory();

    const {AuthStore, UserInfoStore} = useStores();

    const handleLogout = () => {
        AuthStore.logout();
        message.success('已退出登录')
    };

    const handleLogin = () => {
        history.push('/login')
    };

    const handleRegister = () => {
        history.push('/register')
    };

    return (
        <StyledHeader>
            <Icon name="logo"/>
            <StyledNav>
                <StyledLink to="/home" activeClassName="active">首页</StyledLink>
                <StyledLink to="/history" activeClassName="active">上传历史</StyledLink>
                <StyledLink to="/about" activeClassName="active">关于</StyledLink>
            </StyledNav>
            {UserInfoStore.currentUser !== undefined ?
                <StyledUserInfoContainer>
                    <div>{UserInfoStore.currentUser.getUsername()}</div>
                    <StyledPrimaryButton type="primary" onClick={handleLogout}>注销</StyledPrimaryButton>
                </StyledUserInfoContainer>
                :
                <StyledUserInfoContainer>
                    <StyledPrimaryButton type="primary" onClick={handleLogin}>
                        <NavLink to="/login">登录</NavLink>
                    </StyledPrimaryButton>
                    <StyledButton onClick={handleRegister}>
                        <NavLink to="/register">注册</NavLink>
                    </StyledButton>
                </StyledUserInfoContainer>
            }

        </StyledHeader>
    );
});

export default Header;